<template>
  <div class="right-container">
    <el-row class="card-wrap">
      <el-col v-for="(item, index) in tree" :key="index" :span="6">
        <img class="bg" :src="require(`@/assets/images/icp/jczb-bg-${item.groupCode}.png`)">
        <div class="card-name">
          <img :src="require(`@/assets/images/icp/jczb-icon-${item.groupCode}.png`)">
          <p>{{ item.groupName }}</p>
        </div>
        <ul class="card-list">
          <li v-for="list in item.subList" :key="list.id">
            <p>{{ list.name }}</p>
            <span>{{ list.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="screen-container">
      <div>
        <!-- 搜索框 -->
        <search-form
          :data="queryParams"
          label-width="100%"
          :field-list="filterInfo1.fieldList"
          :list-type-info="filterInfo1.dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery"
          @handleEvent="handleEvent"
        />
      </div>
      <div>
        <el-button
          v-if="showCollapse"
          icon="el-icon-caret-top"
          size="mini"
          @click="showCollapse = false"
        />
        <el-button
          v-if="!showCollapse"
          icon="el-icon-caret-bottom"
          size="mini"
          @click="showCollapse = true"
        />
      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </div>
    </div>
    <div v-if="showCollapse" class="collapseSearch">
      <!-- 搜索框 -->
      <search-form
        ref="collapseSearch"
        :data="collapseParams"
        label-width="100%"
        :field-list="filterInfo2.fieldList"
        :list-type-info="filterInfo2.dictList"
      >
        <template #filter-bm_category>
          <el-cascader
            v-model="collapseParams.bm_category"
            placeholder="请选择分保技术要求"
            :props="{ checkStrictly: true ,emitPath:false}"
            :options="filterInfo2.dictList['bm_category_list']"
            clearable
            @change="handleChange($event, 'bm_category')"
          />
        </template>
        <template #filter-event_type>
          <el-cascader
            v-model="collapseParams.event_type"
            placeholder="请选择事件类型"
            :options="filterInfo2.dictList['event_type_list']"
            :props="{ checkStrictly: true,emitPath:false }"
            clearable
            @change="handleChange($event, 'event_type')"
          />
        </template>
      </search-form>
    </div>

    <HkTable
      :loading="loading"
      :table-data="tableList"
      :table-columns="tableFieldList"
      :show-index="true"
      :show-pag="true"
      :is-need-index="true"
      :operate="true"
      :query-params="queryParams"
      rowkey="id"
      table-height="100"
      :total="total"
      size="small"
      @changePage="changePage"
    >
      <!--      <template #metricsName="scope">
        <el-button type="text" @click="handleEdit(scope.row)">{{ scope.row.row.metricsName }}</el-button>
      </template>-->
      <template #eventLevel="scope">
        <span
          class="Inspan"
          :class="
            scope.row.row.eventLevel == '一般'
              ? 'simple'
              : scope.row.row.eventLevel == '较大'
                ? 'big'
                : scope.row.row.eventLevel == '重大'
                  ? 'major'
                  : 'serious'
          "
        >
          {{ scope.row.row.eventLevel }}
        </span>
      </template>
      <template #operate="scope">
        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      </template>
    </HkTable>
    <edit-form ref="dialogRef" title="新增" @handleSubmit="getList" />
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform'
import EditForm from '../components/edit.vue'
import { getMetrics, getMetricsBaseList } from '@/api/icp/monitoring'
import HkTable from '@/components/Hk-Table'

export default {
  components: { EditForm, SearchForm, HkTable },
  props: {
    tree: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 新增框是否 可见
      open: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        metricsName: '',
        event_level: this.$route.query.event_level,
        event_category: this.$route.query.event_category,
        entity_type: this.$route.query.entity_type,
        size: 10,
        current: 1
      },
      //  查询拓展部分
      collapseParams: {
        behavior_type: null,
        veto_status: null,
        metrics_source: null,
        risk_type: null,
        dispose_time_range: null,
        bm_category: null,
        protect_sub_category: null,
        event_type: null,
        event_sub_type: null
      },
      filterParams: {},
      //  查询拆分为两部分
      filterInfo1: {
        fieldList: [
          { label: '关键字', type: 'input', field: 'metricsName' },
          {
            label: '事件级别',
            field: 'event_level',
            type: 'select',
            list: 'event_level_list'
          },
          {
            label: '事件分类',
            field: 'event_category',
            type: 'select',
            list: 'event_category_list'
          },
          {
            label: '监测对象',
            field: 'entity_type',
            type: 'select',
            list: 'entity_type_list'
          }
        ],
        dictList: {
          event_level_list: [],
          event_category_list: [],
          entity_type_list: []
        }
      },
      filterInfo2: {
        fieldList: [
          {
            label: '行为类别',
            field: 'behavior_type',
            type: 'select',
            list: 'behavior_type_list'
          },
          {
            label: '一票否决项',
            field: 'veto_status',
            type: 'select',
            list: 'veto_status_list'
          },
          {
            label: '指标来源',
            field: 'metrics_source',
            type: 'select',
            list: 'metrics_source_list'
          },
          {
            label: '风险分类',
            field: 'risk_type',
            type: 'select',
            list: 'risk_type_list'
          },
          {
            label: '建议处置时限',
            field: 'dispose_time_range',
            type: 'select',
            list: 'dispose_time_range_list'
          },
          {
            label: '分级保护要求',
            field: 'bm_category',
            type: 'slot'
          },
          {
            label: '事件类别',
            field: 'event_type',
            type: 'slot'
          }
        ],
        dictList: {
          behavior_type_list: [],
          veto_status_list: [],
          metrics_source_list: [],
          risk_type_list: [],
          dispose_time_range_list: [],
          bm_category_list: [],
          protect_sub_category_list: [],
          event_type_list: [],
          event_sub_type_list: []
        }
      },
      tableList: [],
      tableFieldList: [
        { label: '事件名称', param: 'metricsName', width: '300' },
        { label: '事件级别', param: 'eventLevel', type: 'slot' },
        { label: '事件编码', param: 'metricsCode' },
        { label: '事件分类', param: 'eventCategory' },
        { label: '事件类型', param: 'eventType' },
        { label: '监测对象', param: 'entityType' }

        /*  { label: '是否发送工单', param: 'orderFlag' },
          { label: '是否发送邮件', param: 'emailFlag' },*/
      ],
      protect_sub_category_allLists: {},
      event_sub_type_allLists: {},
      bm_category_option: [],
      event_type_option: [],
      selectAll: [],
      filterTags: [],
      selectTags: [],
      showCollapse: false,
      tableHeight: 610,
      tableElHeight: 610
    }
  },
  computed: {},
  activated() {
    this.handleQuery(this.queryParams)
  },
  async mounted() {
    await this.getSelectList()
    this.handleQuery(this.queryParams)
  },
  methods: {
    /** 获取下拉列表数据*/
    getSelectList() {
      return new Promise((resolve, reject) => {
        getMetrics().then(res => {
          const result = res
          this.selectAll = res
          result.forEach((item, index) => {
            this.filterInfo1.dictList[item.dictValue + '_list'] = this.handleRestructure(item, item.groupStatus)
            this.filterInfo2.dictList[item.dictValue + '_list'] = this.handleRestructure(item, item.groupStatus)
          })
          resolve(this.selectAll)
        })
      })
    },
    /** 重构数据类型 */
    handleRestructure(data, groupStatus) {
      if (data?.children.length > 0) {
        return data.children.map(i => {
          return { label: i.dictKey, value: i.id, children: this.handleRestructure(i), groupType: groupStatus }
        })
      }
    },
    // 搜索框变化
    handleEvent(val) {
      const field = val.field
      const value = val.value
      this.queryParams = {
        ...this.queryParams,
        ...{
          [field]: value
        }
      }
    },
    /** 级联选择 */
    handleChange(value, type) {

    },
    /** 查询角色列表 */
    getList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      getMetricsBaseList({
        metricsName: this.queryParams.metricsName,
        size: this.queryParams.size,
        current: this.queryParams.current,
        dictIds: [...this.selectTags, ...this.filterTags]
      }).then(res => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(value) {
      this.queryParams.current = 1
      const _keyWord = [
        'event_level',
        'event_category',
        'entity_type',
        'behavior_type',
        'veto_status',
        'metrics_source',
        'risk_type',
        'dispose_time_range',
        'bm_category',
        'protect_sub_category',
        'event_type',
        'event_sub_type'
      ]
      const _collapseValue = this.$refs['collapseSearch'] && this.$refs['collapseSearch'].defaultData
      this.filterTags = []
      value = { ...value, ..._collapseValue }
      console.log(value)
      const keys = Object.keys(value)
      keys.forEach(i => {
        // let groupType
        let currentArr = []
        currentArr = this.selectAll.filter(item => {
          return item.dictValue === i
        })
        if (currentArr.length > 0) {
          if (_keyWord.includes(i) && value[i]) {
            this.filterTags.push(value[i])
          }
        }
      })
      this.filterParams = {
        metricsName: value.metricsName
      }
      this.queryParams = { ...this.queryParams, ...this.collapseParams }
      this.queryParams.metricsName = value.metricsName
      this.getList()
    },
    /** 重置按钮*/
    resetQuery() {
      this.queryParams = {
        metricsName: '', //  搜索第一部分
        event_level: undefined,
        event_category: undefined,
        entity_type: undefined,
        size: 10,
        current: 1
      }
      this.collapseParams = {
        behavior_type: undefined, // 搜索第二部分
        veto_status: undefined,
        metrics_source: undefined,
        risk_type: undefined,
        dispose_time_range: undefined,
        bm_category: undefined,
        protect_sub_category: undefined
      }
      if (this.$refs['collapseSearch']) {
        this.$refs['collapseSearch'].defaultData = []
      }
      this.filterTags = []
      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.dialogRef.show()
    },
    /** 分页*/
    changePage(value) {
      this.getList()
    },
    /** 编辑事件名称*/
    handleEdit(data) {
      this.$router.push({
        path: window.prefix + '/icp/metricsDetail',
        query: {
          metricsBaseCode: data.row.metricsCode
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.right-container {
  padding: 20px;
  display: flex;
  overflow: auto;
  flex: 1;
  flex-direction: column;

  .targetTable {
    flex: 1;
    // height: var(--tableHeight);
    overflow: hidden;

    ::v-deep {
      .el-table {
        overflow: hidden;
      }
    }
  }

  .Inspan {
    width: 90px;
  }

  //   上方卡片
  .card-wrap {
    display: flex;
    justify-content: space-between;
    height: 160px;
    margin-bottom: 20px;

    > div.el-col {
      height: 100%;
      position: relative;
      margin-left: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 33px 0 30px;

      .bg {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        position: absolute;
        z-index: 0;
      }

      .card-name {
        width: 80px;
        z-index: 1;
        margin-right: 15px;

        > img {
          width: 80px;
          height: 80px;
        }

        > p {
          margin: 0;
          margin-top: 8px;
          height: 25px;
          line-height: 25px;
          font-size: 18px;
          text-align: center;
          color: #ffffff;
        }
      }

      .card-list {
        width: calc(100% - 90px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1;

        li {
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #ffffff;
          display: flex;
          justify-content: space-between;

          > p {
            float: left;
            margin: 0;
            font-size: 14px;
            max-width: 75%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          > span {
            display: block;
            float: right;
            font-size: 16px;
          }
        }
      }
    }

    > div.el-col:nth-of-type(1) {
      margin-left: 0;
    }
  }

  //  搜索
  .screen-container {
    display: flex;

    > div {
      display: flex;
      margin-right: 10px;
      align-items: center;

      ::v-deep {
        .content {
          padding: 0;

          > div {
            margin: 0 !important;
          }

          .el-form-item__label {
            display: none !important;
          }
        }
      }
    }

    > div:nth-of-type(1),
    > div:nth-of-type(2) {
      justify-content: flex-start;
    }

    > div:nth-last-of-type(1) {
      order: 1;
      margin-left: auto;
    }
  }

  .collapseSearch {
    padding: 20px 20px 0;
    margin-top: 16px;
    background: #f3f5fc;
    border: 1px solid #f3f5fc;

    ::v-deep {
      .content {
        padding: 0;

        > .el-form {
          flex: 1;
        }

        > div {
          display: none;
        }

        .el-form-item {
          margin-bottom: 18px;
        }

        .el-form-item__label {
          display: none !important;
        }
      }
    }
  }
}

.iconi {
  width: 16px;
  height: 16px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  line-height: 16px;
  color: white;

  &::before {
    font-size: 10px;
    font-weight: 600;
  }
}

// 修改表格样式
::v-deep .el-table--small {
  font-size: 14px;

  .el-table__cell {
    padding: 6px 0;
  }
}

::v-deep .el-select {
  width: 180px;
}

::v-deep .el-pagination__editor.el-input {
  width: 50px;
}

::v-deep .el-pagination__sizes {
  .el-select {
    width: auto;
  }
}
</style>
